<script>
export default {
  name: "TodoFooter",
  props: ['todos', 'checkAllTodo'],
  computed: {
    doneTotal() {
      // let length = this.todos.filter(x => x.done).length;
      // console.log(length);
      // let l = 0;
      // this.todos.forEach(x => x.done ? l++ : 0)
      // console.log(l);

      return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);
    },
    isAll: {
      get() {
        return this.doneTotal === this.todos.length;
      },
      set(v) {
        this.checkAll();
      }
    },
  },
  methods: {
    checkAll(e) {
      this.checkAllTodo(e.target.checked)
    },
  }
}
</script>

<template>
<div class="footer">
  <input type="checkbox" v-model:checked="isAll" @change="checkAll">
  <span>已完成 {{ doneTotal }} / 全部 {{ todos.length }} </span>
  <h2>this is footer</h2>
</div>
</template>

<style scoped lang="less">
.footer{
  background: #42b983;
}
</style>
